<template>
  <div class="shareList">
    <div class="item" @click="toDetail">
      <div class="share-title">
        <div v-html="item.title.substr(4)"></div>
      </div>
      <div class="share-content">
        {{ item.content }}
      </div>
      <div class="share-info">
        <div class="user">
          <!-- <img src="../../../assets/zhou.jpg" alt="" /> -->
          <img :src="baseURL + item.author.avatar" alt="" />
          <span>{{ item.author.nickname }}</span>
        </div>
        <div class="time">{{ item.created_at | getTime }}</div>
        <div class="comment">
          <i class="iconfont iconicon_pinglunliang"></i>{{ item.read }}
        </div>
        <div class="star">
          <i class="iconfont iconicon_dianzanliang"></i> {{ item.star }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data () {
    return {
      baseURL: process.env.VUE_APP_URL
    }
  },
  methods: {
    toDetail () {
      // 跳转到详情页面
      this.$router.push(`/shareDetail/${this.item.id}`)
    }
  },
  created () {
    // this.item.title = this.item.title.replace('item')
    // console.log(this.item.title)
    // console.log(this.item)
  }
}
</script>

<style lang="less" scoped>
.shareList {
  margin-bottom: 45px;
  .item {
    .share-title {
      font-size: 16px;
      font-weight: 700;
    }
    .share-content {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .share-info {
      display: flex;
      font-size: 12px;
      align-items: center;
      .user {
        flex: 1;
        img {
          width: 22px;
          height: 22px;
          opacity: 1;
          border-radius: 50%;
          margin-right: 6px;
        }
      }
      .user,
      .comment,
      .star {
        display: flex;
        align-items: center;
      }
      .time,
      .comment,
      .star {
        margin-left: 20px;
      }
    }
  }
}
</style>
